<script src="../node_modules/vue/dist/vue.js"></script>

<div id="app">
  <example :tags="['h1', 'h2', 'h3']"></example>
</div>

<script>
/* Vue.component('example', {
  functional: true,
  props: {
    tags: {
      type: Array,
      validator (arr) { return !!arr.length }
    }
  },
  render: (h, context) => {
    const tags = context.props.tags
    return h('div', context.data, this.tags.map((tag, index) => h(tag, index)))
  }
}) */
Vue.component('example',{
  props:['tags'],
  render(h) {
    // 可以忽略数据对象
    return h('div', this.tags.map((tag,index)=>h(tag,index)))
  }
})
// 函数组件
Vue.component('example',{
  // functional 变成函数组件
  functional:true,
  // 可以不声明
  // props:['tags'],

  // 函数式组件没有this，参数就是靠context来传递
  // Render context 的属性:
    // props
    // children
    // slots (a slots object) === this.$slots
    // parent
    // listeners
    // injections
    // data
  render(h,{props:{tags}}){
    return h('div',tags.map((tag,index)=>h(tag,index)))
  }
})

// jsx
const Example = {
  functional:true,
  render(h,{props:{tags}}) {
    return <div>{tags.map((tag,index)=>h(tags,index))}</div>
  }
}
// 使用vue jsx 的插件就可以更简洁的方式编写函数组件
const Example = (h,{props:{tags}})=>{
  return <div>{tags.map((tag,index)=>h(tags,index))}</div>
}
new Vue({ el: '#app' })
</script>
